<template>
  <q-dialog ref="dialogRef" @hide="onDialogHide">
    <q-card>
      <q-card-section class="q-dialog-plugin">
        <div v-if="props.project" class="tw-space-y-3">
          <div class=" tw-p-3 twh-bg-white tw-shadow-lg tw-rounded-lg">
            <h3 class="tw-text-xs tw-border-b">课题名称</h3>
            <p class="tw-font-sans">
              <q-input  v-model="project.pname"/>
            </p>
          </div>
<!--          <div class="text-h5 tw-mt-5 ">-->
<!--            描述:-->
<!--            <q-input type="textarea" filled v-model="project.pdesc"/>-->
<!--          </div>-->

          <div class=" tw-p-3 twh-bg-white tw-shadow-lg tw-rounded-lg">
            <h3 class="tw-text-xs tw-border-b">描述</h3>
            <p class="tw-font-sans">
              <q-input type="textarea" filled v-model="project.pdesc"/>
            </p>
          </div>

          <div v-if="project.dept" class=" tw-p-3 twh-bg-white tw-shadow-lg tw-rounded-lg">
            <h3 class="tw-text-xs tw-border-b">学院</h3>
            <p class="tw-font-sans">
              <q-input v-model="project.dept" disable/>
            </p>
          </div>

<!--          <div class="p-3 bg-white shadow rounded-lg">-->
<!--            <h3 class="text-xs border-b">姓名</h3>-->
<!--            <p class="font-sans">-->
<!--              {{ showData.name }}-->
<!--            </p>-->
<!--          </div>-->
<!--          <div v-if="project.dept">-->
<!--            学院:-->
<!--            <q-input v-model="project.dept" disable/>-->
<!--          </div>-->
          <div v-if="project.created_time" class=" tw-p-3 twh-bg-white tw-shadow-lg tw-rounded-lg">
            <h3 class="tw-text-xs tw-border-b">创建时间</h3>
            <p class="tw-font-sans">
              {{ project.created_time }}
            </p>
          </div>
          <div v-if="project.updated_time" class=" tw-p-3 twh-bg-white tw-shadow-lg tw-rounded-lg">
            <h3 class="tw-text-xs tw-border-b">更新时间</h3>
            <p class="tw-font-sans">
              {{ project.updated_time }}
            </p>
          </div>
<!--          <div v-if="project.created_time" class="text-h5 tw-mt-5">-->
<!--            创建时间-->
<!--            <p class="text-body1">{{ project.created_time }}</p>-->
<!--          </div>-->
<!--          <div v-if="project.updated_time" >-->
<!--            <p class="text-h5 tw-mt-5">更新时间</p>-->
<!--            <p >{{ project.updated_time }}</p>-->
<!--          </div>-->
        </div>
        <q-card-actions align="right">
          <q-btn v-if="!project.tnum" color="primary" label="OK" @click="onOKClick"/>
          <q-btn v-else color="primary" label="确认" @click="confirm()"/>

          <q-btn color="primary" label="取消" @click="onDialogCancel"/>
        </q-card-actions>
      </q-card-section>
    </q-card>
  </q-dialog>
</template>

<script setup>
import {ref, defineProps} from "vue";
import {useDialogPluginComponent, useQuasar} from 'quasar'
import {api} from "boot/axios";

const $q = useQuasar()
defineEmits([
  // REQUIRED; need to specify some events that your
  // component will emit through useDialogPluginComponent()
  ...useDialogPluginComponent.emits
])
const {dialogRef, onDialogHide, onDialogOK, onDialogCancel} = useDialogPluginComponent()
let props = defineProps({
  project: {
    type: Object,
    required: true
  }
})
let project = ref(props.project)

function confirm() {
  let formData = new FormData()
  formData.append('pname', project.value.pname)
  formData.append('pdesc', project.value.pdesc)
  formData.append('tnum', project.value.tnum)
  formData.append('dept', project.value.dept)
  if(project.value.pname == ''){
    $q.notify({
      message: '课题名称不能为空',
      color: 'negative',
      position: 'top',
      timeout: 1000
    })
    return
  }else if(project.value.pdesc == ''){
    $q.notify({
      message: '课题描述不能为空',
      color: 'negative',
      position: 'top',
      timeout: 1000
    })
    return
  }

  api({
    url: '/job/project/add',
    method: 'post',
    data: formData
  }).then(res => {
    if (res.data.code == 200) {
      $q.notify({
        message: '添加成功',
        color: 'positive',
        position: 'top',
        timeout: 1000
      })
    }
  }).then(() => {
    //刷新页面
    setTimeout(() => {
      window.location.reload()
    }, 2000)
  })
  onDialogOK()
}

function onOKClick() {
  // on OK, it is REQUIRED to
  // call onDialogOK (with optional payload)
  let formData = new FormData()
  formData.append('pname', project.value.pname)
  formData.append('pdesc', project.value.pdesc)
  formData.append('pid', project.value.pid)

  api({
    url: '/job/project/update',
    method: 'post',
    data: formData
  }).then(res => {
    if (res.data.code == 200) {
      $q.notify({
        message: '修改成功',
        color: 'positive',
        position: 'top',
        timeout: 1000
      })
    }
  })

  onDialogOK()

  // or with payload: onDialogOK({ ... })
  // ...and it will also hide the dialog automatically
}


</script>

<style scoped>

</style>
